<template>
    <MyDialog ref="myDialog" title="新增场景库" width="600px" :on-confirm="confirm" :on-cancel="clearData">
        <MyForm ref="myForm" :form-data="formData" :form-item-list="formItemList" :form-rules="formRules"></MyForm>
    </MyDialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
interface FormData {
    name: string;
    sceneslibVersion: string;
    description: string;
    file: MyComment.FormUploadValue;
}

const emit = defineEmits<{
    (event: 'complete', value: boolean): void;
}>();

const formData: FormData = {
    name: '',
    sceneslibVersion: '',
    description: '',
    file: null,
};

const formItemList: MyComment.FormItemProps<FormData>[] = [
    {
        prop: 'name',
        label: '场景库名称',
        contentProps: { maxlength: '20', placeholder: '请输入场景库名称' } as MyComment.FormItemContentProps['input'],
    },
    {
        prop: 'sceneslibVersion',
        label: '场景库版本',
        contentProps: { maxlength: 20, placeholder: '请输入场景库版本' } as MyComment.FormItemContentProps['input'],
    },
    {
        prop: 'description',
        label: '描述',
        contentProps: { maxlength: 100, placeholder: '请输入描述', type: 'textarea', resize: 'none', rows: 5 } as MyComment.FormItemContentProps['input'],
    },
    {
        prop: 'file',
        label: '场景库',
        type: 'upload',
        contentExtends: { placeholder: '请选择场景库文件' } as MyComment.FormItemContentExtends['upload'],
    },
];

const formRules: MyComment.FormRules<FormData> = {
    name: { required: true, trigger: 'blur', message: '请输入场景库名称' },
    sceneslibVersion: { required: true, trigger: 'blur', message: '请输入场景库版本' },
    file: { required: true, trigger: 'change', message: '请选择场景库文件' },
};

const myDialog = ref<MyComment.DialogInstance>();
const myForm = ref<MyComment.FormInstance<FormData>>();

const confirm = async (): Promise<boolean> => {
    let result = (await myForm.value?.validate()) || false;
    if (result) {
        const data = myForm.value?.getData();
        if (data?.file) {
            const res = await MyService.resource.getSceneLibraryFileUploadUrl({ fileName: data.file.name || '' });
            if (res.code === 200 && res.data) {
                const uploadRes = await MyService.resource.updateSceneLibraryFile({ fileId: res.data.fileId, file: data.file });
                if (uploadRes.code === 200) {
                    const createRes = await MyService.resource.createSceneLibrary({
                        fileId: res.data.fileId,
                        sizeB: data.file.size.toString(),
                        name: data.name,
                        sceneslibVersion: data.sceneslibVersion,
                        description: data.description,
                    });
                    if (createRes.code === 200) {
                        emit('complete', true);
                        return true;
                    } else {
                        ElMessage.error({
                            message: res.msg || '场景设备库失败',
                        });
                        emit('complete', false);
                        return false;
                    }
                } else {
                    ElMessage.error({
                        message: res.msg || '上传文件失败',
                    });
                    emit('complete', false);
                    return false;
                }
            } else {
                ElMessage.error({
                    message: res.msg || '获取文件ID失败',
                });
                emit('complete', false);
                return false;
            }
        }
    }
    return result;
};

const open = () => {
    myDialog.value?.open();
    myForm.value?.clearValidate();
};

const clearData = () => {
    myForm.value?.clearData();
};

defineExpose({
    open,
});
</script>

<style scoped></style>
